<style lang="scss" >
  .download_boder:hover{
    border-bottom: 1px solid;
  }
</style>
<template>
    <div style="position: relative;">
        <!-- 附件 -->
        <template>
            <div>
                <template v-if="files != undefined && files != null && files.length > 0">
                    <Row >
                        <Col>
                            <template v-for="(i,index) in files">
                              <Poptip trigger="hover" word-wrap :transfer="true" :key="index">
                                <Button  :style="{marginRight: '10px',marginBottom: '10px',backgroundColor: getColor(i.fileUrl)}">
                                    {{'公网申请所需附件'}}
                                </Button>
                                <div slot="content" style="text-align: center;font-size:14px">
                                  <template v-if="reg2.test(i.fileName)">
                                    <a href="javascript:void(0)" @click="perview(i)" class="download_boder" style="margin-right: 30px;">预览</a>
                                  </template>
                                  <a href="javascript:void(0)" @click="downLoad(i)" class="download_boder">下载</a>
                                </div>
                              </Poptip>
                                <!-- <Tooltip content="" :key="index" max-width="400" placement="top" theme="light" :transfer="true" style="white-space: normal;">

                                </Tooltip> -->
                            </template>
                        </Col>
                        <!-- <Icon type="ios-link" size="15"/>
                        <a href="javascript:void(0)" @click="downLoad(i)" style="padding-left:5px;padding-inline-end: 20px;font-size:14px">{{i.fileName}}</a> -->
                    </Row>
                </template>
                <template v-else >
                    <div  style="text-align:center">
                        <span style="font-size: 13px;margin-left: 15px;color:#bbb; ">暂无附件展示</span>
                    </div>
                </template>

            </div>
        </template>
        <Spin size="large" fix v-if="loadingSpin">下载附件中...</Spin>
    </div>
</template>
<script>
    import Axios from 'axios'
    export default {
        data () {
            return {
                loadingSpin: false,
                httpHeader:  {
                    Authorization: this.$store.state.token
                },
                fileUrl:this.CONFIG.file_url,
                file: null,
                loadingStatus: false,
                fileUpLoadAction:"",
                 //数据相关基础信息
                applyinfo: {
                    files:this.files
                },
                reg2: /^(\s|\S)+(jpg|png|JPG|PNG|xls|xlsx|doc|docx|ppt|pptx|pdf)+$/
            }
        },
        methods: {
            // 浏览
            perview(i){
              const {href} = this.$router.resolve({
                path: '/other_page/previewFile',
                query: {
                  file: i.fileUrl,
                  fileName: i.fileName
                }
              })
              window.open(href, '_blank')
            },
            // 下载模板
            downLoad(i){
              console.log("i.fileUrl----->",i.fileUrl)
                this.loadingSpin = true
                var that = this;
                var url = this.fileUrl + '/get/' + i.fileUrl
                Axios.get(url,{
                    responseType: 'blob'
                    })
                .then(function(response) {
                  console.log("------>",window.navigator.msSaveOrOpenBlob)
                    if (window.navigator.msSaveOrOpenBlob) {	//IE以及IE内核的浏览器
                      try {
                        var blob = new Blob([response.data])
                        window.navigator.msSaveOrOpenBlob(blob, i.fileName)
                      }catch (e) {
                        console.log(e);
                      }
                    }else{
                      var blob = new Blob([response.data])
                      var downloadElement = document.createElement('a');
                      var href = window.URL.createObjectURL(blob); //创建下载的链接
                      downloadElement.href = href;
                      downloadElement.download = i.fileName
                      document.body.appendChild(downloadElement);
                      downloadElement.click(); //点击下载
                      document.body.removeChild(downloadElement); //下载完成移除元素
                      window.URL.revokeObjectURL(href); //释放掉blob对象
                    }

                    that.loadingSpin = false
                }).catch(function (error) {
                    if(error&&error.response){
                        if(error.response.status==403){//forbiden
                            that.$Notice.error({
                                title: '请求拒绝',
                                desc:  '您没有当前操作权限',
                            });
                        }else if(error.response.status==401){//forbiden
                            that.$Notice.error({
                                title: '用户未登陆',
                                desc:  '请重新登陆该系统',
                            });
                        }else if(error.response.status==400){//forbiden
                            that.$Notice.error({
                            title: '访问数据不存在',
                            desc:  '请联系管理员进行处理',
                            });
                        }else if(error.response.status==406){//forbiden
                            that.$Notice.error({
                            title: '访问数据不存在',
                            desc:  error.data,
                            duration: 5,
                            });
                        }else{
                            that.$Notice.error({
                            title: '网络异常',
                            desc:  '请联系管理员进行处理',
                            });
                        }
                    }else if(error == 400){
                        that.$Notice.warning({
                            title: '访问数据不存在',
                            desc:  '请联系管理员进行处理',
                        });
                    }else if (error == 403){//forbiden
                        that.$Notice.error({
                            title: '请求拒绝',
                            desc:  '您没有当前操作权限',

                        });
                    }else if (error == 404){
                        that.$Notice.error({
                            title: '访问数据有误',
                            desc:  '请联系管理员进行处理',
                        });
                    }else if (error == 401){//forbiden
                        that.$Notice.error({
                            title: '用户未登陆',
                            desc:  '请重新登陆该系统',
                        });
                    }else if (error == 406){//forbiden
                        that.$Notice.error({
                            title: '访问数据不存在',
                            desc:  "请先配置审批节点审批人信息",
                            duration: 5,
                        });
                    }else {
                        that.$Notice.error({
                            title: '网络异常',
                            desc:  '请联系管理员进行处理',
                        });
                    }
                    that.loadingSpin = false
                });
            },
            getColor(url){
                var color = "#fff"
                if(url.indexOf('.docx') !== -1){
                    color = "rgb(222,232,255)"
                }else if(url.indexOf('.xlsx') !== -1){
                    color = "rgb(204,240,235)"
                }else if(url.indexOf('.ppt') !== -1){
                    color = "rgb(254,167,110)"
                }else if(url.indexOf('.txt') !== -1){
                    color = "rgb(255,166,191)"
                }
                return color
            }
        },
        props: {
            files: {}
        },
    }
</script>
